<template>
<div class="businessModalForm">
    <!--        弹出框-->
    <a-modal v-model:visible="visible" title="添加商家" @cancel="handleCancel" @before-ok="handleBeforeOk">
        <a-form :model="form">
            <a-form-item field="name" label="商家名">
                <a-input v-model="form.businessName" allow-clear/>
            </a-form-item>

            <a-form-item field="name" label="商家地址">
                <a-input v-model="form.businessAddress" allow-clear/>
            </a-form-item>

            <a-form-item field="name" label="商家描述">
                <a-input v-model="form.businessExplain" allow-clear/>
            </a-form-item>

            <a-form-item field="name" label="商家图标">
                <a-space direction="vertical" :style="{ width: '100%' }">
                    <a-upload
                            action="/"
                            :fileList="file ? [file] : []"
                            :show-file-list="false"
                            @change="onChange"
                            @progress="onProgress"
                    >
                        <template #upload-button>
                            <div
                                    :class="`arco-upload-list-item${
            file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
          }`"
                            >
                                <div
                                        class="arco-upload-list-picture custom-upload-avatar"
                                        v-if="file && file.url"
                                >
                                    <img :src="file.url"/>
                                    <div class="arco-upload-list-picture-mask">
                                        <IconEdit/>
                                    </div>
                                    <a-progress
                                            v-if="file.status === 'uploading' && file.percent < 100"
                                            :percent="file.percent"
                                            type="circle"
                                            size="mini"
                                            :style="{
                position: 'absolute',
                left: '50%',
                top: '50%',
                transform: 'translateX(-50%) translateY(-50%)',
              }"
                                    />
                                </div>
                                <div class="arco-upload-picture-card" v-else>
                                    <div class="arco-upload-picture-card-text">
                                        <IconPlus/>
                                        <div style="margin-top: 10px; font-weight: 600">Upload</div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </a-upload>
                </a-space>
            </a-form-item>


            <a-form-item field="name" label="类型">
                <a-checkbox-group v-model="value" :options="typeList">
                    <template #label="{ data }">
                        <a-tag>{{ data.label }}</a-tag>
                    </template>
                </a-checkbox-group>
            </a-form-item>

            <a-form-item field="name" label="起送费">
                <a-input-number v-model="form.starPrice" :style="{width:'100px'}" placeholder="Please Enter" class="input-demo" :min="0" :max="100"/>
            </a-form-item>

            <a-form-item field="name" label="配送费">
                <a-input-number v-model="form.deliveryPrice" :style="{width:'100px'}" placeholder="Please Enter" class="input-demo" :min="0" :max="100"/>
            </a-form-item>

            <a-form-item field="name" label="推荐权重">
                <a-input-number v-model="form.businessWeight" :style="{width:'100px'}" placeholder="Please Enter" class="input-demo" :min="1" :max="10"/>
            </a-form-item>
        </a-form>
    </a-modal>
</div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {IconEdit} from "@arco-design/web-vue/es/icon";
import {BusinessDTO} from "../type/business";
import {TypeVO} from "../type/type";
import {getTypeAPI} from "../service/type.ts";
import {add} from "../service/business.ts";
import { Message } from '@arco-design/web-vue';
//标签类型
const typeList = ref([])
const visible = defineModel('visible',{
    required:true,
    default:false,
    type:Boolean
})
const file = ref();
const value = ref([]);

const handleCancel = () => {
    visible.value = false;
}

onMounted(async ()=>{
    const res = await getTypeAPI();
    typeList.value.splice(0,typeList.value.length)
    res.data.forEach((item:TypeVO)=>{
        typeList.value.push({label:item.label,value:item.id})
    })
})

const onChange = (_, currentFile) => {
    file.value = {
        ...currentFile,
    };
};
const onProgress = (currentFile) => {
    file.value = currentFile;
};
const form = ref<BusinessDTO>({
    businessAddress: "",
    businessExplain: "",
    file: file.value,
    biz:"food_image",
    businessName: "",
    businessType:value.value,
    businessWeight: 0,
    deliveryPrice: 0,
    id: 0,
    starPrice: 0

})
const handleBeforeOk = async (done) => {
    form.value.file = file.value.file;
    form.value.businessType = value.value;
    console.log(form)

    const formData =new FormData()

    for (const key in form.value) {
        formData.append(key, form.value[key])
    }

    const res = await add(formData);
    if (res.data != null && res.data.id>0){
        Message.success('添加成功!')
    }else {
        Message.error('添加失败！')
    }
    done()
};

</script>

<style scoped>

</style>
